/**
 * Segmented Control
 */

.segmented-control {
	display: flex;
	margin: 0;
	border-radius: 4px;
	background-color: $white;
	list-style: none;
}

.segmented-control__item {
	flex: 1 1 auto;
	cursor: pointer;

	&:first-of-type {
		.segmented-control__link {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}
	}

	&:last-of-type {
		.segmented-control__link {
			border-right: solid 1px lighten( $gray, 20% );
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}

	&.is-selected {
		+ .segmented-control__item .segmented-control__link {
			border-left-color: $gray-dark;
		}
	}
}

.segmented-control__link {
	display: block;
	padding: 8px 12px;
	border: solid 1px lighten( $gray, 20% );
	border-right: none;
	font-size: 14px;
	line-height: 18px;
	color: $gray-text-min;
	text-align: center;

	&:focus {
		color: $gray-dark;
		outline: none;

		.keyboard-navigation & .segmented-control__text {
			outline: dotted 1px $gray-dark;
		}
	}

	.notouch & {
		&:hover {
			color: $gray-dark;
		}
	}

	.segmented-control__item.is-selected & {
		border-color: $gray-dark;
		color: $gray-dark;
	}
}



.segmented-control__text {
	display: block;
	max-width: 100%;
	color: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.segmented-control.is-compact {
	.segmented-control__link {
		font-size: 13px;
		padding: 4px 8px;
	}
}

//Primary variation
.segmented-control.is-primary {

	.segmented-control__item {

		&.is-selected {

			.segmented-control__link {
		  	border-color: $blue-medium;
		 		background-color: $blue-medium;
		 		color: $white;
		  }

			+ .segmented-control__item .segmented-control__link {
				border-left-color: $blue-medium;
			}
		}
	}
}
